<template>
    <div class="p-5 bg-gray-50 box-border h-screen w-screen">
        <div class=" space-y-3">
            <template v-for="i of list">
                <div class="bg-white p-5 box-border shadow rounded">
                    <div class="flex justify-between items-center">
                        <div class="font-bold text-xl">{{ i.text }}</div>
                        <div class="text-xs">{{ i.date }}</div>
                        
                    </div>
                    <div class=" text-sm mt-5">{{ i.no }} 把 {{ i.turnNum1 }} {{ i.turnNum2 }} {{ i.turnNum3 }} {{
                        i.turnTotal }} {{ i.result }} </div>
                </div>
            </template>
        </div>

    </div>
</template>

<script setup lang="ts">
import { useHistoryStore } from '@/stores/history'
import { computed } from 'vue';
import moment from 'moment';
import { useTimeAgo } from '@vueuse/core'

const history = useHistoryStore()

const list = computed(() => {
    return (history.list || []).map(e => {
        e.date = useTimeAgo(new Date(e.timestamp))
        return e;
    })
})

const sum = computed(() => {
    return e => e.reduce((a, b) => a + b, 0);
});

</script>

<style scoped></style>